<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>2022圣诞快乐！</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        @charset "UTF-8";

        /*
-- CREDITS
-- CHRISTMAS TREE DESIGN - Based on https://www.freevector.com/free-christmas-tree-vectors-19224
-- BG GRADIENT - Manuel Pinto https://codepen.io/P1N2O/pen/pyBNzX
-- PRESENT PATTERN - Yoksel https://codepen.io/yoksel/pen/jufvg
*/
        /*
-- Colors
*/
        /*
-- Extends
*/
        h1,
        body {
            background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
            background-size: 400% 400%;
            -webkit-animation: Gradient 15s ease infinite;
            -moz-animation: Gradient 15s ease infinite;
            animation: Gradient 15s ease infinite;
        }

        /*
-- Mixin Xmas-ball
*/
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #000;
        }

        ul {
            list-style-type: none;
        }

        ul li {
            display: inline-block;
        }

        /*
-- Text
*/
        h1 {
            font-family: "Mountains of Christmas", cursive;
            font-size: 42px;
            line-height: 60px;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        h1::before,
        h1::after {
            content: "❆";
            margin: 0 10px;
        }

        h2 {
            font-family: "Source Sans Pro", sans-serif;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        h3 {
            font-family: "Open Sans Condensed", sans-serif;
            font-weight: 300;
            font-size: 18px;
            letter-spacing: 2px;
            margin-bottom: 5px;
        }

        p {
            font-family: "Dancing Script", cursive;
            font-size: 20px;
            font-weight: 700;
        }

        span {
            font-family: "Roboto", sans-serif;
            font-size: 14px;
            font-weight: 400;
        }

        /*
-- Card Styles
*/
        .card-container {
            height: 675px;
            width: 675px;
            padding: 30px;
            background-color: rgba(255, 255, 255, 0.6);
            border: 8px double #fff;
            border-radius: 20px;
            text-align: center;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            overflow: hidden;
            position: relative;
            /*Overflow on Circle on Safari*/
            -webkit-mask-image: -webkit-radial-gradient(white, black);
        }

        /*
-- Snow --
*/
        .snow-flakes-1,
        .snow-flakes-2 {
            height: 5px;
            width: 5px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            z-index: 20;
            background-color: transparent;
            opacity: 1;
        }

        .snow-flakes-1 {
            top: 0;
            box-shadow: 37px 60px 6px 3px #fff, 533px 673px 6px 2px #fff, 355px 12px 6px 1px #fff, 480px 215px 6px 5px #fff, 248px 55px 6px 6px #fff, 628px 460px 6px 7px #fff, 445px 634px 6px 3px #fff, 622px 554px 6px 8px #fff, 41px 628px 6px 1px #fff, 209px 58px 6px 6px #fff, 547px 391px 6px 2px #fff, 589px 336px 6px 6px #fff, 196px 307px 6px 8px #fff, 393px 242px 6px 8px #fff, 383px 42px 6px 7px #fff, 293px 488px 6px 5px #fff, 416px 379px 6px 2px #fff, 421px 41px 6px 4px #fff, 221px 480px 6px 2px #fff, 108px 52px 6px 8px #fff, 622px 304px 6px 5px #fff, 496px 240px 6px 2px #fff, 678px 108px 6px 4px #fff, 394px 394px 6px 1px #fff, 238px 5px 6px 4px #fff, 551px 657px 6px 8px #fff, 622px 184px 6px 8px #fff, 74px 67px 6px 4px #fff, 144px 602px 6px 3px #fff, 508px 456px 6px 1px #fff;
            -moz-animation: moveDown 15s ease infinite;
            -webkit-animation: moveDown 15s ease infinite;
            animation: moveDown 15s ease infinite;
        }

        .snow-flakes-2 {
            top: -700px;
            box-shadow: 487px 588px 6px 7px #fff, 348px 97px 6px 3px #fff, 53px 399px 6px 8px #fff, 358px 571px 6px 1px #fff, 453px 526px 6px 1px #fff, 617px 13px 6px 3px #fff, 595px 78px 6px 3px #fff, 97px 296px 6px 5px #fff, 490px 304px 6px 1px #fff, 50px 77px 6px 6px #fff, 470px 14px 6px 7px #fff, 667px 242px 6px 1px #fff, 206px 14px 6px 5px #fff, 7px 225px 6px 2px #fff, 435px 87px 6px 7px #fff, 315px 2px 6px 6px #fff, 73px 65px 6px 5px #fff, 597px 559px 6px 7px #fff, 37px 602px 6px 1px #fff, 348px 160px 6px 6px #fff, 216px 93px 6px 2px #fff, 172px 635px 6px 8px #fff, 223px 136px 6px 4px #fff, 261px 344px 6px 8px #fff, 34px 174px 6px 6px #fff, 126px 609px 6px 4px #fff, 507px 176px 6px 3px #fff, 340px 258px 6px 8px #fff, 94px 360px 6px 6px #fff, 563px 217px 6px 7px #fff;
            -moz-animation: moveDown 13s ease infinite;
            -webkit-animation: moveDown 13s ease infinite;
            animation: moveDown 13s ease infinite;
            animation-delay: 2s;
        }

        /*
-- Xmas Balls
*/
        .xmas-ball {
            border-radius: 50%;
            position: absolute;
            z-index: 5;
        }

        .ball-0,
        .ball-1,
        .ball-2,
        .ball-3,
        .ball-4,
        .ball-5,
        .ball-6,
        .ball-7,
        .ball-8,
        .ball-9,
        .ball-10 {
            -webkit-animation: Blink 0.5s infinite;
            -moz-animation: Blink 0.5s infinite;
            animation: Blink 0.5s infinite;
        }

        .ball-0 {
            border-radius: 50%;
            height: 50px;
            width: 50px;
            background-color: #fbc02d;
            border: 6px solid #f9a825;
            margin: auto;
            position: relative;
            top: 15px;
            z-index: 6;
        }

        .ball-1 {
            height: 20px;
            width: 20px;
            background-color: #f48fb1;
            border: 4px solid #f06292;
            bottom: 22px;
            right: 10px;
        }

        .ball-2 {
            height: 15px;
            width: 15px;
            background-color: #b39ddb;
            border: 4px solid #9575cd;
            bottom: 26px;
            right: 55px;
        }

        .ball-3 {
            height: 30px;
            width: 30px;
            background-color: #90caf9;
            border: 4px solid #64b5f6;
            bottom: 50px;
            left: 18px;
        }

        .ball-4 {
            height: 25px;
            width: 25px;
            background-color: #90caf9;
            border: 4px solid #64b5f6;
            bottom: 20px;
            left: 70px;
        }

        .ball-5 {
            height: 15px;
            width: 15px;
            background-color: #ffab91;
            border: 4px solid #ff8a65;
            top: 6px;
            left: 0px;
        }

        .ball-6 {
            height: 20px;
            width: 20px;
            background-color: #66bb6a;
            border: 4px solid #4caf50;
            top: 51px;
            right: 73px;
        }

        .ball-7 {
            height: 10px;
            width: 10px;
            background-color: #90caf9;
            border: 4px solid #64b5f6;
            top: 18px;
            right: 90px;
        }

        .ball-8 {
            height: 15px;
            width: 15px;
            background-color: #f48fb1;
            border: 4px solid #f06292;
            top: 30px;
            right: 15px;
        }

        .ball-9 {
            height: 10px;
            width: 10px;
            background-color: #b39ddb;
            border: 4px solid #9575cd;
            top: 8px;
            left: 30px;
        }

        .ball-10 {
            height: 20px;
            width: 20px;
            background-color: #ffab91;
            border: 4px solid #ff8a65;
            top: 25px;
            right: 90px;
        }

        /*
-- Tree Styles
*/
        .tree-container {
            bottom: 12px;
            position: relative;
        }

        .tree-p1,
        .tree-p2,
        .tree-p3,
        .tree-p4 {
            text-align: center;
        }

        .tree-p1 li,
        .tree-p2 li,
        .tree-p3 li,
        .tree-p4 li {
            overflow: hidden;
        }

        .tree-p1 li:first-child,
        .tree-p2 li:first-child,
        .tree-p3 li:first-child,
        .tree-p4 li:first-child {
            position: relative;
            left: 5px;
        }

        .tree-p1 li:nth-child(2),
        .tree-p2 li:nth-child(2),
        .tree-p3 li:nth-child(2),
        .tree-p4 li:nth-child(2) {
            position: relative;
            right: 5px;
        }

        .tree-left-branch,
        .tree-right-branch {
            background-color: #2e7d32;
            position: relative;
        }

        .tree-left-branch {
            transform: skew(-30deg);
            left: 60px;
            border-bottom: 10px solid #1b5e20;
            border-left: 10px solid #1b5e20;
            border-bottom-left-radius: 25px;
        }

        .tree-right-branch {
            transform: skew(30deg);
            right: 60px;
            border-bottom: 10px solid #1b5e20;
            border-right: 10px solid #1b5e20;
            border-bottom-right-radius: 25px;
        }

        .tree-right-branch::after {
            content: "";
            position: absolute;
            height: 100%;
            z-index: 10;
            background-color: rgba(27, 94, 32, 0.2);
            right: 0;
            border-bottom-right-radius: 15px;
        }

        .tree-right-branch:first-child::after {
            width: 15px;
        }

        .tree-right-branch:nth-child(2)::after {
            width: 20px;
        }

        .tree-right-branch:nth-child(3)::after {
            width: 25px;
        }

        .tree-right-branch.stubborn::after {
            width: 30px;
        }

        /*
-- Tree Part 1 Sizes
*/
        .tree-p1 .tree-left-branch,
        .tree-p1 .tree-right-branch {
            width: 100px;
            height: 110px;
        }

        .tree-p1 ul {
            height: 119px;
        }

        /*
-- Tree Part 2 Sizes
*/
        .tree-p2 .tree-left-branch,
        .tree-p2 .tree-right-branch {
            width: 140px;
            height: 95px;
        }

        .tree-p2 ul {
            height: 104px;
        }

        /*
-- Tree Part 3 Sizes
*/
        .tree-p3 {
            z-index: 1;
        }

        .tree-p3 .tree-left-branch,
        .tree-p3 .tree-right-branch {
            width: 175px;
            height: 95px;
        }

        .tree-p3 ul {
            height: 104px;
        }

        /*
-- Tree Part 4 Sizes
*/
        .tree-p4 {
            z-index: 2;
            position: relative;
        }

        .tree-p4 .tree-left-branch,
        .tree-p4 .tree-right-branch {
            width: 200px;
            height: 65px;
        }

        .tree-p4 ul {
            height: 75px;
        }

        /*
-- Tree Wood Styles
*/
        .wood {
            height: 70px;
            width: 55px;
            background-color: #a98274;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            margin: auto;
            border-left: 10px solid #795548;
            border-bottom: 10px solid #795548;
            border-right: 10px solid #795548;
            position: relative;
        }

        .wood::before {
            content: "";
            position: absolute;
            height: 100%;
            z-index: 1;
            background-color: rgba(121, 85, 72, 0.2);
            width: 25px;
            right: 0;
        }

        /*
-- Present Styles 1
*/
        .present-container-1 {
            position: absolute;
            z-index: 1;
            right: 105px;
            bottom: 30px;
        }

        .present-container-1 .tie {
            width: 20px;
            height: 20px;
            background-color: #4caf50;
            border-radius: 50%;
            margin: auto;
            position: relative;
            top: 10px;
            z-index: 1;
        }

        .present-container-1 .tie::before {
            content: "";
            width: 15px;
            height: 15px;
            background-color: transparent;
            border: 5px solid #4caf50;
            border-radius: 50%;
            position: absolute;
            right: 10px;
            bottom: 0px;
        }

        .present-container-1 .tie::after {
            content: "";
            width: 15px;
            height: 15px;
            background-color: transparent;
            border: 5px solid #4caf50;
            border-radius: 50%;
            position: absolute;
            bottom: 0px;
            left: 10px;
        }

        .present-container-1 .lid {
            width: 120px;
            height: 35px;
            border-radius: 6px;
            z-index: 2;
            position: relative;
            background: radial-gradient(circle, #4caf50 0.25em, rgba(255, 255, 255, 0) 0.25em, rgba(255, 255, 255, 0) 0.5em, rgba(102, 187, 106, 0.7) 0.5em, rgba(102, 187, 106, 0.7) 0.6em, rgba(255, 255, 255, 0) 0.6em) 0 0, radial-gradient(circle, #66bb6a 0.25em, rgba(255, 255, 255, 0) 0.25em, rgba(255, 255, 255, 0) 0.5em, rgba(76, 175, 80, 0.7) 0.5em, rgba(76, 175, 80, 0.7) 0.6em, rgba(255, 255, 255, 0) 0.6em) 1em 1em, radial-gradient(circle, rgba(76, 175, 80, 0.7) 0.125em, rgba(255, 255, 255, 0) 0.125em) 1em 0, radial-gradient(circle, rgba(102, 187, 106, 0.7) 0.1em, rgba(255, 255, 255, 0) 0.1em) 0 1em;
            background-color: #fff;
            background-size: 2em 2em;
            background-repeat: repeat;
        }

        .present-container-1 .lid::after {
            content: "";
            width: 100px;
            height: 6px;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            left: 10px;
            bottom: -6px;
        }

        .present-container-1 .box {
            width: 100px;
            height: 70px;
            background-color: #f44336;
            margin: auto;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        /*
-- Present Styles 2
*/
        .present-container-2 {
            position: absolute;
            right: 146px;
            bottom: 0px;
            z-index: 3;
        }

        .present-container-2 .tie {
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 50%;
            margin: auto;
            position: relative;
            top: 10px;
            z-index: 1;
        }

        .present-container-2 .tie::before {
            content: "";
            width: 15px;
            height: 15px;
            background-color: transparent;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            right: 10px;
            bottom: 0px;
        }

        .present-container-2 .tie::after {
            content: "";
            width: 15px;
            height: 15px;
            background-color: transparent;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            bottom: 0px;
            left: 10px;
        }

        .present-container-2 .lid {
            width: 160px;
            height: 30px;
            background-color: #f44336;
            border-radius: 6px;
            z-index: 2;
            position: relative;
        }

        .present-container-2 .lid::after {
            content: "";
            width: 140px;
            height: 6px;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            left: 10px;
            bottom: -6px;
        }

        .present-container-2 .box {
            width: 140px;
            height: 60px;
            margin: auto;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            overflow: hidden;
            box-shadow: 8px -20px 50px 5px rgba(0, 0, 0, 0.2);
            background: linear-gradient(135deg, #f44336 0.3em, rgba(232, 58, 37, 0) 0.3em) 0 1em, linear-gradient(-135deg, #f44336 0.3em, rgba(232, 58, 37, 0) 0.3em) 0 1em, radial-gradient(circle at 1.79em 1.85em, #f44336 0.255em, rgba(232, 58, 37, 0) 0.261em) 0 -1em, radial-gradient(circle at 0.21em 1.85em, #f44336 0.255em, rgba(232, 58, 37, 0) 0.261em) 0 -1em, linear-gradient(135deg, #66bb6a 0.3em, rgba(152, 204, 150, 0) 0.3em) 1em 0, linear-gradient(-135deg, #66bb6a 0.3em, rgba(152, 204, 150, 0) 0.3em) 1em 0, radial-gradient(circle at 1.79em 1.85em, #66bb6a 0.255em, rgba(152, 204, 150, 0) 0.261em) 1em 0, radial-gradient(circle at 0.21em 1.85em, #66bb6a 0.255em, rgba(152, 204, 150, 0) 0.261em) 1em 0;
            background-size: 2em 2em;
            background-color: #fff;
            background-repeat: repeat;
        }

        /*
-- Blink Xmas Balls
*/
        @-webkit-keyframes Blink {
            50% {
                filter: brightness(130%);
            }
        }

        @-moz-keyframes Blink {
            50% {
                filter: brightness(130%);
            }
        }

        @keyframes Blink {
            50% {
                filter: brightness(130%);
            }
        }

        /*
-- Change Background Gradient
*/
        @-webkit-keyframes Gradient {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        @-moz-keyframes Gradient {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes Gradient {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        /*
-- Snow Fall
*/
        @-webkit-keyframes moveDown {
            0% {
                -webkit-transform: translateY(-50em);
                opacity: 1;
            }

            25% {
                opacity: 0.8;
            }

            50% {
                box-shadow: 227px 85px 6px 3px #fff, 658px 649px 6px 5px #fff, 586px 98px 6px 3px #fff, 477px 508px 6px 6px #fff, 489px 189px 6px 2px #fff, 263px 37px 6px 7px #fff, 131px 85px 6px 4px #fff, 598px 426px 6px 5px #fff, 428px 416px 6px 3px #fff, 193px 536px 6px 8px #fff, 475px 6px 6px 6px #fff, 481px 291px 6px 2px #fff, 316px 432px 6px 6px #fff, 536px 559px 6px 6px #fff, 480px 247px 6px 5px #fff, 87px 663px 6px 8px #fff, 659px 150px 6px 2px #fff, 401px 90px 6px 7px #fff, 466px 632px 6px 7px #fff, 392px 586px 6px 6px #fff, 213px 681px 6px 3px #fff, 185px 478px 6px 6px #fff, 284px 623px 6px 2px #fff, 430px 198px 6px 8px #fff, 353px 250px 6px 5px #fff, 237px 172px 6px 5px #fff, 130px 571px 6px 6px #fff, 679px 178px 6px 7px #fff, 95px 213px 6px 1px #fff, 444px 341px 6px 6px #fff;
                opacity: 0.6;
            }

            75% {
                opacity: 0.3;
            }

            100% {
                -webkit-transform: translateY(50em);
                opacity: 0.1;
            }
        }

        @-moz-keyframes moveDown {
            0% {
                -moz-transform: translateY(-50em);
                opacity: 1;
            }

            25% {
                opacity: 0.8;
            }

            50% {
                box-shadow: 201px 574px 6px 2px #fff, 526px 523px 6px 1px #fff, 454px 650px 6px 7px #fff, 215px 559px 6px 7px #fff, 516px 176px 6px 3px #fff, 294px 423px 6px 7px #fff, 401px 194px 6px 4px #fff, 318px 427px 6px 4px #fff, 171px 327px 6px 8px #fff, 464px 313px 6px 7px #fff, 212px 136px 6px 2px #fff, 186px 350px 6px 7px #fff, 650px 566px 6px 7px #fff, 280px 589px 6px 8px #fff, 69px 60px 6px 5px #fff, 430px 361px 6px 5px #fff, 653px 436px 6px 6px #fff, 220px 676px 6px 4px #fff, 569px 211px 6px 3px #fff, 599px 212px 6px 8px #fff, 44px 624px 6px 4px #fff, 497px 552px 6px 2px #fff, 285px 136px 6px 8px #fff, 660px 284px 6px 8px #fff, 279px 99px 6px 5px #fff, 1px 617px 6px 2px #fff, 503px 690px 6px 6px #fff, 196px 565px 6px 3px #fff, 314px 363px 6px 5px #fff, 62px 697px 6px 7px #fff;
                opacity: 0.6;
            }

            75% {
                opacity: 0.3;
            }

            100% {
                -moz-transform: translateY(50em);
                opacity: 0.1;
            }
        }

        @keyframes moveDown {
            0% {
                transform: translateY(-50em);
                opacity: 1;
            }

            25% {
                opacity: 0.8;
            }

            50% {
                box-shadow: 340px 341px 6px 8px #fff, 584px 123px 6px 2px #fff, 352px 159px 6px 4px #fff, 107px 10px 6px 2px #fff, 138px 239px 6px 2px #fff, 197px 430px 6px 6px #fff, 558px 18px 6px 5px #fff, 558px 697px 6px 7px #fff, 273px 179px 6px 4px #fff, 687px 485px 6px 4px #fff, 697px 144px 6px 3px #fff, 495px 298px 6px 2px #fff, 134px 533px 6px 8px #fff, 244px 15px 6px 6px #fff, 319px 646px 6px 8px #fff, 367px 245px 6px 4px #fff, 437px 35px 6px 3px #fff, 74px 658px 6px 3px #fff, 155px 141px 6px 5px #fff, 189px 394px 6px 3px #fff, 495px 674px 6px 1px #fff, 597px 449px 6px 1px #fff, 609px 363px 6px 8px #fff, 217px 52px 6px 4px #fff, 155px 353px 6px 8px #fff, 577px 374px 6px 2px #fff, 125px 213px 6px 7px #fff, 246px 569px 6px 7px #fff, 278px 379px 6px 5px #fff, 142px 282px 6px 8px #fff;
                opacity: 0.6;
            }

            75% {
                opacity: 0.3;
            }

            100% {
                transform: translateY(50em);
                opacity: 0.1;
            }
        }
    </style>
</head>

<body>
    <div class="card-container">
        <div class="snow-flakes-1"></div>
        <div class="snow-flakes-2"></div>
        <h2 style="color:#f78989"><span style="font-family:  Mountains of Christmas, cursive; font-size: 24px;">To</span> 盆盆
        </h2>
        <h1>Merry Christmas</h1>
        <div class=" tree-container">
            <div class="ball-0"></div>
            <div class="tree-p1">
                <ul>
                    <li>
                        <div class="xmas-ball ball-1"></div>
                        <div class="tree-left-branch"></div>
                    </li>
                    <li>
                        <div class="tree-right-branch"></div>
                    </li>
                </ul>
            </div>
            <div class="tree-p2">
                <ul>
                    <li>
                        <div class="xmas-ball ball-2"></div>
                        <div class="tree-left-branch"></div>
                    </li>
                    <li>
                        <div class="xmas-ball ball-3"></div>
                        <div class="tree-right-branch"></div>
                    </li>
                </ul>
            </div>
            <div class="tree-p3">
                <ul>
                    <li>
                        <div class="xmas-ball ball-6"></div>
                        <div class="tree-left-branch"></div>
                    </li>
                    <li>
                        <div class="xmas-ball ball-5"></div>
                        <div class="xmas-ball ball-4"></div>
                        <div class="tree-right-branch"></div>
                    </li>
                </ul>
            </div>
            <div class="tree-p4">
                <ul>
                    <li>
                        <div class="xmas-ball ball-7"></div>
                        <div class="xmas-ball ball-8"></div>
                        <div class="tree-left-branch"></div>
                    </li>
                    <li>
                        <div class="xmas-ball ball-9"></div>
                        <div class="xmas-ball ball-10"></div>
                        <div class="tree-right-branch stubborn"></div>
                    </li>
                </ul>
            </div>
            <div class="wood"></div>
            <div class="presents">
                <div class="present-container-1">
                    <div class="tie"></div>
                    <div class="lid"></div>
                    <div class="box"></div>
                </div>
                <div class="present-container-2">
                    <div class="tie"></div>
                    <div class="lid"></div>
                    <div class="box"></div>
                </div>
            </div>
        </div>
        <h3>新的一年</h3>
        <p style="color:#85ce61"><span></span>快快乐乐开开心心捏～</p>
    </div>
</body>

</html>